<template>
  <div class=" bg-primaryColor h-[50px]">
    <div class="content-box text-[14px] text-[#e0dacf] relative h-[50px] flex flex-row items-center justify-between">
      <ul class=" flex flex-row  ul-nav">
        <li><router-link :to="{ name: 'Index' }">首页</router-link></li>
        <li><router-link :to="{ name: 'ProductInfo' }">产品</router-link></li>
        <li><router-link :to="{ name: 'NewInfo' }">新闻</router-link></li>
        <li><router-link :to="{ name: 'MessageInfo' }">留言板</router-link></li>
        <li><router-link :to="{ name: 'Share' }">分享中心</router-link></li>
        <li><router-link :to="{ name: 'UserCenter' }">个人中心</router-link></li>
        <li v-if="store.token !== null"><router-link :to="{ name: 'Shopcart' }">我的购物车</router-link></li>
      </ul>
      <div class="flex flex-row items-center">
        <div v-if="!userInfoData" class="flex">
          <div @click="$router.push({ name: 'Login' })" class=" mr-10 cursor-pointer hover:text-[#fff]">登录</div>
          <div @click="$router.push({ name: 'Register' })" class=" cursor-pointer hover:text-[#fff]">注册</div>
        </div>
        <div v-else class=" flex flex-row items-center">
          <el-image :src="userInfoData.pic" fit="cover" class=" w-[37px] h-[37px] rounded-full" />
          <div class=" mx-[20px] hover:text-[#fff] cursor-pointer" @click="$router.replace({ name: 'UserCenter' })">
            欢迎登录：{{
              userInfoData.nickname
            }}</div>
          <div class=" cursor-pointer hover:text-[#fff]" @click="loginOut">退出登录</div>
        </div>
      </div>
    </div>
  </div>
  <slot></slot>
  <div class=" bg-[#1d191a]">
    <div class="w-[1226px] m-auto py-[60px] grid grid-cols-3 text-[#fff] text-[14px]">
      <div>
        <p class=" mb-[20px]">快速链接</p>
        <ul class=" flex flex-row flex-wrap bottom-nav">
          <li><router-link :to="{ name: 'Index' }">首页</router-link></li>
          <li><router-link :to="{ name: 'ProductInfo' }">产品</router-link></li>
          <li><router-link :to="{ name: 'NewInfo' }">新闻</router-link></li>
          <li><router-link :to="{ name: 'MessageInfo' }">留言板</router-link></li>
          <li><router-link :to="{ name: 'Share' }">分享中心</router-link></li>
          <li><router-link :to="{ name: 'UserCenter' }">个人中心</router-link></li>
        </ul>
      </div>
      <div>
        <p class=" mb-[20px]">联络信息</p>
        <div class=" flex flex-row text-[13px] py-[5px]">
          <span>电话 : 17710561295</span>
          <span class=" ml-[20px]">座机 : 0912138</span>
        </div>
        <div class=" text-[13px] py-5">地址 : 湖北省武汉市东湖新技术开发区关山大道589号</div>
      </div>
      <div>
        <p class=" mb-[20px]">社交网络</p>
        <ul class="flex flex-row social-ul">
          <li><span class="iconfont icon-QQ-circle-fill"></span></li>
          <li><span class="iconfont icon-weixin-copy"></span></li>
          <li><span class="iconfont icon-weibo-copy"></span></li>
          <li><span class="iconfont icon-facebookfacebook52"></span></li>
        </ul>
        <p class=" text-[13px] py-5">Copyright &copy;2022 pets huaxia All Rights Reserved.12138</p>
        <el-link type="warning" href="http://www.beian.gov.cn/">
          备案号&nbsp;&nbsp;鄂ICP备2022011864号</el-link>
      </div>
    </div>
  </div>
</template>
<script setup>
import { mainStore } from "../store/index";
import { ElMessageBox, ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import API from "../utils/API";
const store = mainStore();
const router = useRouter();
const userInfoData = store.loginInfoData;

//退出登录
const loginOut = () => {
  ElMessageBox.confirm("确定要退出登录吗？", "询问", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    store.logOut();
    console.log("用户退出登录");
    router.replace({ name: "Login" });
    ElNotification({
      title: "提示",
      message: "退出登录",
      type: "warning"
    });
  })
    .catch(() => {
      console.log("本次未退出登录");
    })

}
</script>

<style scoped lang="scss">
.ul-nav {
  li {
    &:hover {
      cursor: pointer;
      color: #fff;
    }
  }

  li+li {
    margin-left: 50px;
  }
}

.bottom-nav {
  li {
    width: 70px;
    font-size: 13px;
    padding: 5px 0;
  }
}

// 底部社交网络icon图标
.social-ul {
  li {
    span {
      font-size: 21px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  li+li {
    margin-left: 10px;
  }
}
</style>